<template>
  <div>
    <template>
      <div class="title_box"><span class="dot"></span>科室简介</div>
      <div class="infobox" id="desc">
        {{ details.desc ? details.desc : "暂无内容" }}
        <div class="background" v-if="!shrink1 && details.desc.length > 90"></div>
      </div>
      <div class="seemore" v-if="details.desc.length > 90" @click="seemoreFun1">
        {{ !shrink1 ? "查看更多" : "收起" }}
        <img src="@/assets/img/gengduo.png" alt=""
             :style="{ transform: !shrink1 ? 'rotate(0deg)' : 'rotate(180deg)' }"/>
      </div>
      <div class="gap"></div>
    </template>
    <template>
      <div class="title_box"><span class="dot"></span>诊疗范围</div>
      <div class="infobox" id="goodAt">
        {{ details.goodAt ? details.goodAt : "暂无内容" }}
        <div class="background" v-if="!shrink2 && details.goodAt.length > 90"></div>
      </div>
      <div class="seemore" v-if="details.goodAt.length > 90" @click="seemoreFun2">
        {{ !shrink2 ? "查看更多" : "收起" }}
        <img src="@/assets/img/gengduo.png" alt=""
             :style="{ transform: !shrink2 ? 'rotate(0deg)' : 'rotate(180deg)' }"/>
      </div>
      <div class="gap"></div>
    </template>

    <template>
      <div class="title_box"><span class="dot"></span>相关医生</div>
      <div class="appo_doctor_list">

        <div class="doctor_item" v-for="(item, index) in details.docters" @click="goDoctorIntroduction(item)">
          <div class="doctor_item_left">
            <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/img_male.png')" :onerror="errorImg01" alt=""
                 v-if="item.sex == '1'"/>
            <img :src="item.avatarUrl?item.avatarUrl:require('@/assets/img/icon_female.png')" :onerror="errorImg02"
                 alt="" v-else/>
          </div>
          <div class="doctor_item_right">
            <div class="doctor_item_right_1">
              {{ item.name }} <span v-if="item.team">{{ item.team }}</span>
            </div>
            <div class="doctor_item_right_2">
              {{ item.jobTitle }}
            </div>
            <div class="doctor_item_right_3" v-if="item.memo.length > 0">
              <span v-for="i in item.memo">
                {{ i }}
              </span>

            </div>
            <div class="doctor_item_right_5" v-if="item.desc">

              {{ item.desc }}
            </div>

          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import {getDeptInfo} from "@/api/api";
import {getToken, removeToken, removeWxUserinfoCookies} from "@/api/auth";

export default {
  data() {
    return {
      details: {
        desc: "",
        goodAt: "",
      },
      shrink1: false,
      shrink2: false,
      descClientHeight: "",
      goodAtClientHeight: "",
      errorImg01: 'this.src="' + require("@/assets/img/img_male.png") + '"',
      errorImg02: 'this.src="' + require("@/assets/img/icon_female.png") + '"',
    };
  },
  created() {
    document.title = this.$route.query.deptName;
    this.getDeptInfo(this.$route.query.deptId);
  },
  mounted() {
    this.descClientHeight = document.getElementById("desc").clientHeight;
    this.goodAtClientHeight = document.getElementById("goodAt").clientHeight;
    console.log(this.descClientHeight)
    console.log(this.goodAtClientHeight)
  },
  methods: {
    getDeptInfo(deptId) {
      getDeptInfo({
        level: "1",
        deptId: deptId,
      }).then((res) => {
        if (res.code == 200) {
          var resData = res.data;
          resData.docters.forEach(element => {
            if (element.memo) {
              element.memo = element.memo.split("|")
            } else {
              element.memo = []
            }
          });
          this.details = resData
          this.details.goodAt = res.data.goodAt == null ? "" : res.data.goodAt;
        }
      });
    },
    clearFun() {
      try {
        console.log("清理localStorage");
        localStorage.clear();
      } catch (err) {
        console.log("清理localStorage失败:" + err);
      }
      try {
        console.log("清理token");
        removeToken();
        // removeWxUserinfoCookies();
      } catch (err) {
        alert(err)
        console.log(err);
      }
    },
    isLoginAndIsband() {
      const that = this;
      if (!getToken()) {
        that.$vux.confirm.show({
          // 组件除show外的属性
          content: "未登录,请先登录账号",
          onCancel() {
          },
          onConfirm() {
            that.clearFun()
            that.$router.push({path: "/"});
          },
        });
        return false;
      } else {
        if (window.localStorage.getItem("isband") == "false") {
          this.$vux.confirm.show({
            // 组件除show外的属性
            content: "请添加就诊人",
            onCancel() {
            },
            onConfirm() {
              that.$router.push({path: "/my_patient"});
            },
          });
          return false;
        } else {
          return true;
        }
      }
    },
    seemoreFun1() {
      this.shrink1 = !this.shrink1;
      if (this.shrink1) {
        document.getElementById("desc").style.height = "auto";
      } else {
        document.getElementById("desc").style.height = "96px";
      }
    },
    seemoreFun2() {
      this.shrink2 = !this.shrink2;
      if (this.shrink2) {
        document.getElementById("goodAt").style.height = "auto";
      } else {
        document.getElementById("goodAt").style.height = "96px";
      }
    },
    // 跳转医生详情页
    async goDoctorIntroduction(item) {
      const that = this;
      var or = await that.isLoginAndIsband();
      if (or) {
        window.localStorage.removeItem("appoIdx")
        that.$router.push({path: "/doctor_details", query: item});
      }
    },
  },
  filters: {
    memoTo(value) {
      var str = value.replaceAll("|", " | ")
      return str
    },
  }
};
</script>
<style scoped>
.title_box {
  padding: 0 1rem;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #131a2a;
  line-height: 42px;
}

.title_box .dot {
  width: 3px;
  height: 15px;
  background: #448eff;
  border-radius: 2px;
  margin-right: 12px;
}

.infobox {
  padding: 1rem;
  font-size: 14px;
  font-weight: 500;
  color: #3f4551;
  line-height: 24px;
  height: 96px;
  overflow: hidden;
  padding-bottom: 0;
  position: relative;
}

.infobox .background {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 58px;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
}

.seemore {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #448eff;
}

.seemore img {
  width: 11px;
  height: 6px;
  margin-left: 9px;
}

.gap {
  height: 12px;
  width: 100%;
  background-color: #f7fafd;
}

.appo_doctor_list {
  width: calc(100% - 2rem);
  padding: 1rem;
  height: calc(100% - 2rem);
  overflow-y: scroll;
  background-color: #fff;
}

.doctor_item {
  width: calc(100% - 1.625rem);
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.8125rem;
  font-size: 0.875rem;
  box-shadow: 0.00rem 0.00rem 0.9375rem 0.00rem rgba(174, 206, 254, 0.3);
  border-radius: 0.375rem;
  background-color: #fff;
  position: relative;
  display: flex;

}

.doctor_item .doctor_item_left {
  width: 4.25rem;
  margin-right: 0.625rem;


}

.doctor_item .doctor_item_left > img {
  width: 4.25rem;
  height: 4.25rem;
  margin-right: 0.625rem;
}


.doctor_item .doctor_item_right {
  width: calc(100% - 5rem);
  font-size: 0.8125rem;
}

.doctor_item .doctor_item_right .doctor_item_right_1 {
  line-height: 1.625rem;
  height: 1.625rem;
  font-size: 1.00rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #131A2A;
  display: flex;
  align-items: center;

}

.doctor_item .doctor_item_right .doctor_item_right_1 span {
  display: inline-block;
  padding: 0 0.44rem;
  height: 1.1875rem;
  line-height: 1.1875rem;
  background: rgba(255, 202, 127, 0.25);
  border-radius: 0.19rem;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FF9C32;
  margin-left: 0.625rem;
}

.doctor_item .doctor_item_right .doctor_item_right_2 {
  line-height: 1.5rem;
  height: 1.5rem;

}

.doctor_item .doctor_item_right .doctor_item_right_3 {
  line-height: 1.5rem;
  height: 1.5rem;


}

.doctor_item .doctor_item_right .doctor_item_right_3 span {
  display: inline-block;
  padding: 0.00rem 0.375rem;
  height: 1.19rem;
  line-height: 1.1875rem;
  background: rgba(68, 142, 255, .1);
  border-radius: 0.19rem;
  font-size: 0.75rem;
  color: #448EFF;
  margin-right: 0.75rem;
}

.doctor_item .doctor_item_right .doctor_item_right_5 {
  line-height: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #a4adbe;
}
</style>
